<template>
  <div style="height:100% ;width:100%">
    <div id="map" ref="basicMapbox" style="height:100% ;width:100%"></div>
    <el-popover
      class="popover-style"
      placement="right-start"
      width="360"
      trigger="click">
        <div class="popover-list">
          <h4 style="margin:0 0 10px 0;">选择底图</h4>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item,index) in style.list" :key="index" class="item">
              <div :class="index == style.current ? 'img active' : 'img'" @click="changeStyle(index)" >
                <img :src="item.src" width="100%" height="60px" />
              </div>
                <div class="align-center p-t-10">{{ item.label }}</div>
            </el-col>
          </el-row>
        </div>
      <div slot="reference" class="btn">
        <img :src="selStyle.src" width="80px" height="60px" />
        <el-tag type="primary" effect="dark" class="tag">底图</el-tag>
      </div>
    </el-popover>
  </div>
</template>
<script>
import * as turf from '@turf/turf';
import * as mapboxgl from 'mapbox-gl';
import { stylesV8 } from '@/assets/js/config';
import lionbay from '@/assets/geojson/lionbay';
import {city, cityMapCenter, geoserver} from '@/config/env';
export default {
  props:{
    center: {
      type: Array,
      default: () => [113.5,22.9]
    },
    zoom: {
      type: Number,
      default: 6.4,
    },
    geojson:{
      type: Object,
      default: () => lionbay,
    }
  },
  data(){
    return {
      map: null,
      mapboxToken: 'pk.eyJ1Ijoic25zcXNzIiwiYSI6ImNrZ2oxbWtqMTAzNnAyeXFwMDAzdmp2YTAifQ.AuaHmI9j-_VbOYxUSJACQw',
      selStyle: stylesV8[1],
      style:{
        current: 1,
        list:stylesV8,
      },
    }
  },
  created(){
    
  },
  destroyed() {
    this.map.remove();
    this.map = null;
  },
  mounted(){
    this.$nextTick(() => {
      var map = new mapboxgl.Map({
        accessToken: 'pk.eyJ1Ijoic25zcXNzIiwiYSI6ImNrZ2oxbWtqMTAzNnAyeXFwMDAzdmp2YTAifQ.AuaHmI9j-_VbOYxUSJACQw',
        container: 'map',
        // style: 'mapbox://styles/mapbox/streets-v8',
        style: {
            version: 8,
            name: 'BlankMap',
            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
            sources: {},
            layers: [
              {
                id: 'background',
                type: 'background',
                paint: {
                  'background-color': '#f0f2f5'
                }
              },
              {
                id: 'split-layer',
                type: 'background',
                paint: {
                  'background-color': 'rgba(0,0,0,0)'
                }
              },
            ]
          },
        center: this.center, // 设置地图中心点的经纬度
        zoom: this.zoom // 设置地图缩放级别
      });
      map.on('load', () => {
        this.map = map;
        this.fitBounds();
        this.changeStyle(1);
        this.$emit('load', this.map);
      });
      map.on('resize', () => {
        this.fitBounds();
      })
    })
    
  },
  methods: {
    changeStyle(index){
      this.style.current = index;
      this.selStyle = this.style.list[index];
      const styles = this.selStyle.url.split('/');
      if (this.map.getLayer('basemap-style-layer')) {
        this.map.removeLayer('basemap-style-layer');
      }
      if (this.map.getSource('basemap-style-source')) {
        this.map.removeSource('basemap-style-source');
      }
      this.map.addSource('basemap-style-source', {
        type: 'raster',
        scheme: 'xyz',
        tiles: [
          `https://api.mapbox.com/styles/v1/snsqss/${styles[styles.length - 1]}/tiles/512/{z}/{x}/{y}?access_token=${this.mapboxToken}`
        ]
      });
      this.map.addLayer({
        id: 'basemap-style-layer',
        type: 'raster',
        source: 'basemap-style-source',
      }, 'split-layer');
    },

    async fitBounds(){ // 根据geojson区域自动适配地图等级，在reszie方法内也要调用一次
      const data = this.geojson;
      const box = turf.bbox(data);
      this.map.fitBounds([[box[0], box[1]], [box[2], box[3]]], {
        padding: 50,
        linear: false,
        animate: false
      });
    }
  },
}
</script>
<style>
@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css');
</style>
<style lang="scss" scoped>
  .popover-style{
    position:absolute;top:10px;left:10px;z-index:10; 
    .btn{
      overflow:hidden;
      border-radius: 4px;
      border: 2px solid #fff;
      box-shadow: 0 1px 5px rgba(0, 0, 0 , 0.3);
      background:#fff;
      text-align:center;
      font-size:12px;
      cursor: pointer;
      position:relative;
      img{float:left;}
      .tag{
        position:absolute;bottom:0px;right:0px;z-index:2;
      }
    }
  }
  .popover-list{
    .item{text-align:center;}
    .img{
        // width:80px;
        height:60px;
        overflow:hidden;
        border-radius: 4px;
        border: 2px solid #fff;
        box-shadow: 0 1px 5px rgba(0, 0, 0 , 0.3);
        cursor: pointer;
        &.active {
            border-color: #2749b7;
        }
        img{margin:0 auto;}
      }
  }
</style>